<%--
  Created by IntelliJ IDEA.
  User: Wy
  Date: 2022/5/17
  Time: 20:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<center>
    <font color="red" size="7">qq注册页面</font><br>
    用户名：<input type="text" name="username" id="username"/>
    <span id="sp"></span><br>
    密码：<input type="password" name="pwd" ><br>

    <input type="button" value="注册" onclick="kp();">
</center>
    <script type="text/javascript">
        //当用户名框输入内容就调用此方法
        function kp() {
            //获取用户名框的values
            //document.getElementById方法代表获取这样就获取到了控件 .value得到values的值.name得到name的值
         var value=document.getElementById("username").value;
         //2.进行验证
            if(value!=null&& value!=""){


                //3.创建AjAX对象
                var xmlhttp;
                if(window.XMLHttpRequest){
                    xmlhttp=new XMLHttpRequest();
                }else{
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                //4.设置状态改变监听,监听返回的状态码
                xmlhttp.onreadystatechange=function () {
                    //readystate状态码为4代表请求完成, 响应已就绪,
                    //state状态码为200代表http请求成功
                    if(xmlhttp.readyState==4 && xmlhttp.status==200){
                        //5.获取响应的数据
                         var responseText = xmlhttp.responseText;
                         //6.将放回的数据操作操作Dom填充到页面中显示
                        //获取id叫做sp的对象
                        var sp = document.getElementById("sp");
                        if(responseText=="1"){
                            //可以注册
                            var html ="<font color='green'>恭喜可以注册</font>"
                            //把html插入到sp对象中
                            sp.innerHTML=html;

                        }else{
                            var html="<font color='red'>不可以注册<font>"
                            sp.innerHTML=html;
                        }


                    }
                }
                //7. 设置ajax的请求方式和请求路径
                xmlhttp.open("post","<%=request.getContextPath()%>/registServlet",true);

                //8.设置ajax的请求头
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //9.发送请求

                xmlhttp.send("name="+value);

            }

        }


    </script>


</body>
</html>
